<script setup lang="ts">
/**
 * @author lwlianghehe@gmail.com
 * @date 2025/08/04
 */
import { ref, computed, reactive } from "vue";
import {
  ElDialog,
  ElButton,
  ElInput,
  ElForm,
  ElFormItem,
  ElSelect,
  ElOption,
  FormRules,
} from "element-plus";
import { WatermarkData } from "./types";
import ColorPanel from "../color-panel/color-panel.vue";

const props = withDefaults(
  defineProps<{
    modelValue?: boolean;
    title?: string;
    width?: string | number;
    initialData?: WatermarkData;
  }>(),
  {
    modelValue: false,
    title: "水印",
    width: "500px",
    initialData: () => ({
      content: "",
      color: "#000000",
      fontSize: 120,
      opacity: 0.3,
      repeat: 1,
      horizontalSpacing: 10,
      verticalSpacing: 10,
    }),
  }
);

const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
  (e: "confirm", data: WatermarkData): void;
  (e: "cancel"): void;
}>();

const formData = ref<WatermarkData>({
  content: props.initialData.content,
  color: props.initialData.color,
  fontSize: props.initialData.fontSize,
  opacity: props.initialData.opacity,
  repeat: props.initialData.repeat,
  horizontalSpacing: props.initialData.horizontalSpacing,
  verticalSpacing: props.initialData.verticalSpacing,
});

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val: boolean) => {
    emit("update:modelValue", val);
  },
});

const formRef = ref();

const rules = reactive<FormRules<WatermarkData>>({
  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  fontSize: [
    { required: true, message: "请输入字体大小", trigger: "blur" },
    {
      type: "number",
      min: 1,
      max: 1000,
      message: "字体大小必须在1-1000之间",
      trigger: "blur",
    },
  ],
  opacity: [
    { required: true, message: "请输入透明度", trigger: "blur" },
    {
      type: "number",
      min: 0,
      max: 1,
      message: "透明度必须在0-1之间",
      trigger: "blur",
    },
  ],
  horizontalSpacing: [
    { required: true, message: "请输入水平间隔", trigger: "blur" },
    {
      type: "number",
      min: 0,
      max: 1000,
      message: "水平间隔必须在0-1000之间",
      trigger: "blur",
    },
  ],
  verticalSpacing: [
    { required: true, message: "请输入垂直间隔", trigger: "blur" },
    {
      type: "number",
      min: 0,
      max: 1000,
      message: "垂直间隔必须在0-1000之间",
      trigger: "blur",
    },
  ],
});

// 重复选项
const repeatOptions = [
  { label: "不重复", value: 0 },
  { label: "重复", value: 1 },
];

const handleConfirm = async () => {
  try {
    await formRef.value.validate();
    emit("confirm", formData.value);
    dialogVisible.value = false;
  } catch (error) {
    // 验证失败，不关闭对话框
  }
};

const handleCancel = () => {
  emit("cancel");
  dialogVisible.value = false;
  // 重置表单数据
  formData.value = {
    content: props.initialData.content,
    color: props.initialData.color,
    fontSize: props.initialData.fontSize,
    opacity: props.initialData.opacity,
    repeat: props.initialData.repeat,
    horizontalSpacing: props.initialData.horizontalSpacing,
    verticalSpacing: props.initialData.verticalSpacing,
  };
};

// 监听初始数据变化
const resetFormData = () => {
  formData.value = {
    content: props.initialData.content,
    color: props.initialData.color,
    fontSize: props.initialData.fontSize,
    opacity: props.initialData.opacity,
    repeat: props.initialData.repeat,
    horizontalSpacing: props.initialData.horizontalSpacing,
    verticalSpacing: props.initialData.verticalSpacing,
  };
};

// 当对话框打开时重置数据
const handleOpen = () => {
  resetFormData();
};

// 颜色选择处理
const handleColorChange = (color: string) => {
  formData.value.color = color;
};
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    @open="handleOpen"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="内容" prop="content" required>
        <el-input
          v-model="formData.content"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>

      <el-form-item label="颜色" prop="color" required>
        <div class="color-picker-wrapper">
          <el-popover
            ref="colorPanelRef"
            placement="bottom"
            trigger="click"
            width="fit-content"
          >
            <template #reference>
              <div
                class="color-preview"
                :style="{ backgroundColor: formData.color }"
              ></div>
            </template>
            <ColorPanel height="400px" v-model="formData.color" @change="handleColorChange" />
          </el-popover>
        </div>
      </el-form-item>

      <el-form-item label="字体大小" prop="fontSize" required>
        <el-input
          v-model.number="formData.fontSize"
          type="number"
          placeholder="请输入字体大小"
          clearable
        />
      </el-form-item>

      <el-form-item label="透明度" prop="opacity" required>
        <el-input
          v-model.number="formData.opacity"
          type="number"
          step="0.1"
          min="0"
          max="1"
          placeholder="请输入透明度"
          clearable
        />
      </el-form-item>

      <el-form-item label="重复" prop="repeat">
        <el-select
          v-model="formData.repeat"
          placeholder="选择重复方式"
          style="width: 100%"
        >
          <el-option
            v-for="option in repeatOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="水平间隔" prop="horizontalSpacing">
        <el-input
          v-model.number="formData.horizontalSpacing"
          type="number"
          placeholder="请输入水平间隔"
          clearable
        />
      </el-form-item>

      <el-form-item label="垂直间隔" prop="verticalSpacing">
        <el-input
          v-model.number="formData.verticalSpacing"
          type="number"
          placeholder="请输入垂直间隔"
          clearable
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
}

.color-preview {
  width: 40px;
  height: 24px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.color-preview:hover {
  border-color: #c0c4cc;
}

/* 移除某些字段的必填标记 */
.el-form-item:nth-child(5) .el-form-item__label::before,
.el-form-item:nth-child(6) .el-form-item__label::before,
.el-form-item:nth-child(7) .el-form-item__label::before {
  content: "";
}
</style>
